<template>
    <div>
        <el-form :model="form.searcModel" labelWidth="100px">
            <pro-layout-content-search :baseCount="3" :columnCount="4">
                <pro-select key="1" uiType="list" label="测试1" :dataSource="getFromSelectListDataSource" v-model="form.searcModel.value1" prop="value1"/>
                <pro-select key="2" uiType="list" label="测试2"  :dataSource="getFromSelectListDataSource" v-model="form.searcModel.value2" prop="value2"/>
                <pro-select key="3" uiType="list" label="测试3"  :dataSource="getFromSelectListDataSource" v-model="form.searcModel.value3" prop="value3"/>
                <pro-select key="4" uiType="list" label="测试4"  :dataSource="getFromSelectListDataSource" v-model="form.searcModel.value4" prop="value4" />
                <pro-select key="5" uiType="list" label="测试5"  :dataSource="getFromSelectListDataSource" v-model="form.searcModel.value5" prop="value5" />
            </pro-layout-content-search>
        </el-form>
    </div>
</template>

<script>
    import dataSource from "mars-pro/src/pro/mixins/dataSource/index";
    import {get, post, postForm} from 'mars-pro/src/pro/request';
    import createState from 'mars-pro/src/pro/createState';
    import {vRequired} from 'mars-pro/src/pro/rule';
    function getFromSelectListDataSource(request, response){
        const {query} = request.body
        return  response.$delay(100,{
            list: Array.from({length: 15}).map((r, index) => ({
                label: index !== 0 ? '选项' + (query ? '('+ query +')': '')  +'-' + index : '测试tooltip的展示效果你好都发大水发射点发大水',
                value: 'key' + (query ? '('+ query +')' : '') + '-' + index
            }))
        })
    }
    export default {
        name: 'demoFrom',
        componentName: 'demoFrom',
        mixins:[
            dataSource('getFromSelectListDataSource', post('/mock/post').mockData(getFromSelectListDataSource), {dataField: 'list'})
        ],
        data(){
            return {
                //创建也给表单模型model
                form:createState({model:{}, searcModel:{}})
            }
        }
    }
</script>

<style lang="scss">
</style>